<template>
<!--首页-->
  <div id="Home">
    <div class="search_bar clearfix">
      <!-- 天天生鲜logo  -->
      <a href="index.html"><img src="../assets/images/logo.png" class="logo fl"></a>
      <div class="search_con fl">
        <input type="text" class="input_text fl" name="" placeholder="搜索商品" v-model="name">
        <input type="button" class="input_btn fr" name="" value="搜索" @click="search">
      </div>
      <!-- 我的购物车 -->
      <div class="guest_cart fr">
        <a href="#/cart" class="cart_name fl">我的购物车</a>
        <div class="goods_count fl" id="show_count">{{ length }}</div>
      </div>
    </div>

    <div class="navbar_con">
      <div class="navbar">
        <h1 class="fl">全部商品分类</h1>
        <ul class="navlist fl">
          <li><a href="">首页</a></li>
          <li><a href="">&nbsp</a></li>
          <li><a href="">|</a></li>
          <li><a href="">&nbsp</a></li>
          <li><a href="index.html#/blog">博文</a></li>
        </ul>
      </div>
    </div>
    <!-- 分类导航栏/滑动窗口/右侧边栏 -->
    <div class="center_con clearfix">
      <!-- 分类导航栏  -->
      <ul class="subnav fl">
        <li v-for="item in goodsType">
          <a @click="more(item.id)" :class="item.cls">{{ item.name }}</a>
        </li>
      </ul>
      <!-- 滑动窗口 -->
      <div class="slide fl block">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in banner">
            <img :src="serverApiUrl + item.imgUrl" alt="幻灯片">
          </el-carousel-item>

        </el-carousel>
      </div>
      <!-- 右侧边栏 -->
      <div class="adv fl">
        <a href="#"><img src="../assets/images/adv/adv01.png"></a>
        <a href="#"><img src="../assets/images/adv/adv02.png"></a>
      </div>
    </div>
    <!-- 服务项 -->
    <div class="fresh_service grid_c1" id="fresh_service_2" style="">
      <ul class="mod_service grid_c1 clearfix">
        <li class="mod_service_item item1">
          <div class="mod_service_item_inner">
            <i class="mod_iconfont mod_service_icon icon-fresh_service_icon_1"></i>
            <p class="mod_service_title">食品安全</p>
            <p class="mod_service_desc">精选生鲜 严格质检</p>
          </div>
        </li>
        <li class="mod_service_item item2">
          <div class="mod_service_item_inner">
            <i class="mod_iconfont mod_service_icon icon-fresh_service_icon_2"></i>
            <p class="mod_service_title">全程冷链</p>
            <p class="mod_service_desc">自营物流 安全可控</p>
          </div>
        </li>
        <li class="mod_service_item item3">
          <div class="mod_service_item_inner">
            <i class="mod_iconfont mod_service_icon icon-fresh_service_icon_3"></i>
            <p class="mod_service_title">鲜活天然</p>
            <p class="mod_service_desc">绿色生态 京东精选</p>
          </div>
        </li>
        <li class="mod_service_item item4">
          <div class="mod_service_item_inner">
            <i class="mod_iconfont mod_service_icon icon-fresh_service_icon_4"></i>
            <p class="mod_service_title">产地直采</p>
            <p class="mod_service_desc">限定产源 质量保证</p>
          </div>
        </li>
        <li class="mod_service_item item5">
          <div class="mod_service_item_inner">
            <i class="mod_iconfont mod_service_icon icon-fresh_service_icon_5"></i>
            <p class="mod_service_title">无忧售后</p>
            <p class="mod_service_desc">优鲜赔 售后通道</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 分类详情页 -->
    <div class="list_model" v-for="item in productArr">
      <div class="fresh_mod_head">
        <div class="fresh_mod_head_inner">
          <h3 class="fresh_mod_head_title" :id="item.id">\ &nbsp {{ item.name }} &nbsp /</h3>
          <p class="fresh_mod_head_subtitle">INSPIRATION FRESH</p>
        </div>
      </div>
      <div class="list_title clearfix">
        <h3 class="fl" :id="item.id">{{ item.name }}</h3>

        <a @click="more(item.id)" class="goods_more fr" id="fruit_more">查看更多 ></a>
      </div>

      <div class="goods_con clearfix">
        <!-- <div class="goods_banner fl"><img :src="item.banner"></div> -->
        <!-- 左侧导航栏  -->
        <div class="fresh_category_act1"
          style="background: url(//img11.360buyimg.com/cms/jfs/t6868/56/1584301821/12315/9fe217a6/5982d8c6N279ff1cf.png) 0 0 no-repeat;">
          <h4 class="fresh_category_title">{{ item.name }}</h4>
          <div class="fresh_category_keys clearfix">
  
          </div>
          <a class="fresh_category_more" target="_blank" @click="more(item.id)" clstag="channel|keycount|3742|more6_1"
            style="box-shadow: 0 6px 8px undefined">更多水果</a>
        </div>

        <div class="goods_type fl"><img :src="serverApiUrl + item.imgUrl"></div>

        <ul class="goods_list fl">
          <li v-for="i in item.productsdetailets" style="border-radius: 10px;border-color:black;background-color: rgb(221, 246, 146);margin: 2px;">
            <h3><a @click="todetail(i.id); addView(i.id)">{{ i.name }}</a></h3>
              <el-tooltip placement="top">
                <div slot="content">{{ i.description }}</div>
                <a @click="todetail(i.id); addView(i.id)">
                  <img style="margin-top: 10px;" :src="serverApiUrl + i.imgurl" >
                </a>
              </el-tooltip>
             
           
            <div class="prize">¥ {{ i.price }}/{{ i.unit }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getCategoryApi } from '@/api/GetCategory'
import { getBannerApi } from '@/api/GetBanner'
import { serverApiUrl } from '@/api/serverApiUrl'
import { getHomeApi } from '@/api/GetCategory'
import { addViewApi } from '@/api/GetProductById'
import { addViewHistoryApi } from '@/api/AddViewHistory'
import { getCartListApi } from '../api/GetCartList'
import { searchApi } from '../api/Search'
/*导入图片*/


export default {
  name: "Home",
  data() {
    return {
      serverApiUrl: serverApiUrl,
      goodsType: [],
      banner: [],
      productArr: [],
      length: "1",
      name: "",
      hover:false
    }
  },
  methods: {
    kind() {
      getCategoryApi()
        .then(resp => {
          console.log(resp);
          this.goodsType = resp;
        })
    },

    getbanner() {
      getBannerApi()
        .then(resp => {
          console.log(resp);
          this.banner = resp;
        })
    },
    bindIcon(icon) {
      return require("@/assets/images" + icon);
    },
    more(id) {

      this.$router.push({
        path: '/more',
        query: {
          typeid: id,
          name: this.name,
        }
      })
    },
    getHomeProduct() {
      getHomeApi().then(resp => {
        this.productArr = resp;
        console.log(this.productArr);
      })
    },
    todetail(id) {
      if(JSON.parse(window.sessionStorage.getItem("user")) == null){
        this.$confirm('暂未登录，是否去登录')
          .then(_ => {
            this.$router.push({
        path: '/login',
      })
          })
          .catch(_ => {});
      }
      else{
        this.$router.push({
        path: '/detail',
        query: {
          id: id
        }
      })
      }
      
    },
    addView(id) {
      addViewApi({ "id": id }).then(resp => {
        if (JSON.parse(window.sessionStorage.getItem("user")) != null) {
          addViewHistoryApi({
            "productid": id,
            "userid": JSON.parse(window.sessionStorage.getItem("user")).id,
            "viewtime": new Date(),
          })
        }
      });


    },
    search() {
      this.$router.push({
        path: '/more',
        query: {
          typeid: "",
          name: this.name,
        }
      })
    }

  },
  created() {
    this.$parent.ifShow = true;
    this.kind();
    this.getbanner();
    this.getHomeProduct();
    getCartListApi({ "id": JSON.parse(window.sessionStorage.getItem("user")).id }).then(resp => {
      this.length = resp.length;

    })
  }
}
</script>

<style scoped>
.goods_list{
  background-color: #e0ffab;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin-left: 10%;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}
</style>

    <!-- 分类导航栏/滑动窗口/右侧边栏 -->
    <div class="center_con clearfix">
      <!-- 分类导航栏  -->
      <ul class="subnav fl">
        <li v-for="item in goodsType">
          <a @click="more(item.id)" :class="item.cls">{{ item.name }}</a>
        </li>
      </ul>
      <!-- 滑动窗口 -->
      <div class="slide fl block">
        <el-carousel height="400px">
          <el-carousel-item v-for="item in banner">
            <img :src="serverApiUrl + item.imgUrl" alt="幻灯片">
          </el-carousel-item>

        </el-carousel>
      </div>
      <!-- 右侧边栏 -->
      <div class="adv fl">
        <a href="#"><img src="../assets/images/adv/adv01.png"></a>
        <a href="#"><img src="../assets/images/adv/adv02.png"></a>
      </div>
    </div>
    <!-- 服务项 -->
    <div class="fresh_service grid_c1" id="fresh_service_2" style="">
      <ul class="mod_service grid_c1 clearfix">
        <li class="mod_service_item item1">
          <div class="mod_service_item_inner">
            <i class="mod_iconfont mod_service_icon icon-fresh_service_icon_1"></i>
            <p class="mod_service_title">食品安全</p>
            <p class="mod_service_desc">精选生鲜 严格质检</p>
          </div>
        </li>
        <li class="mod_service_item item2">
          <div class="mod_service_item_inner">
            <i class="mod_iconfont mod_service_icon icon-fresh_service_icon_2"></i>
            <p class="mod_service_title">全程冷链</p>
            <p class="mod_service_desc">自营物流 安全可控</p>
          </div>
        </li>
        <li class="mod_service_item item3">
          <div class="mod_service_item_inner">
            <i class="mod_iconfont mod_service_icon icon-fresh_service_icon_3"></i>
            <p class="mod_service_title">鲜活天然</p>
            <p class="mod_service_desc">绿色生态 京东精选</p>
          </div>
        </li>
        <li class="mod_service_item item4">
          <div class="mod_service_item_inner">
            <i class="mod_iconfont mod_service_icon icon-fresh_service_icon_4"></i>
            <p class="mod_service_title">产地直采</p>
            <p class="mod_service_desc">限定产源 质量保证</p>
          </div>
        </li>
        <li class="mod_service_item item5">
          <div class="mod_service_item_inner">
            <i class="mod_iconfont mod_service_icon icon-fresh_service_icon_5"></i>
            <p class="mod_service_title">无忧售后</p>
            <p class="mod_service_desc">优鲜赔 售后通道</p>
          </div>
        </li>
      </ul>
    </div>
    <!-- 分类详情页 -->
    <div class="list_model" v-for="item in productArr">
      <div class="fresh_mod_head">
        <div class="fresh_mod_head_inner">
          <h3 class="fresh_mod_head_title" :id="item.id">\ &nbsp {{ item.name }} &nbsp /</h3>
          <p class="fresh_mod_head_subtitle">INSPIRATION FRESH</p>
        </div>
      </div>
      <div class="list_title clearfix">
        <h3 class="fl" :id="item.id">{{ item.name }}</h3>

        <a @click="more(item.id)" class="goods_more fr" id="fruit_more">查看更多 ></a>
      </div>

      <div class="goods_con clearfix">
        <!-- <div class="goods_banner fl"><img :src="item.banner"></div> -->
        <!-- 左侧导航栏  -->
        <div class="fresh_category_act1"
          style="background: url(//img11.360buyimg.com/cms/jfs/t6868/56/1584301821/12315/9fe217a6/5982d8c6N279ff1cf.png) 0 0 no-repeat;">
          <h4 class="fresh_category_title">{{ item.name }}</h4>
          <div class="fresh_category_keys clearfix">
  
          </div>
          <a class="fresh_category_more" target="_blank" @click="more(item.id)" clstag="channel|keycount|3742|more6_1"
            style="box-shadow: 0 6px 8px undefined">更多水果</a>
        </div>

        <div class="goods_type fl"><img :src="serverApiUrl + item.imgUrl"></div>

        <ul class="goods_list fl">
          <li v-for="i in item.productsdetailets" style="border-radius: 10px;border-color:black;background-color: rgb(221, 246, 146);margin: 2px;">
            <h3><a @click="todetail(i.id); addView(i.id)">{{ i.name }}</a></h3>
              <el-tooltip placement="top">
                <div slot="content">{{ i.description }}</div>
                <a @click="todetail(i.id); addView(i.id)">
                  <img style="margin-top: 10px;" :src="serverApiUrl + i.imgurl" >
                </a>
              </el-tooltip>
             
           
            <div class="prize">¥ {{ i.price }}/{{ i.unit }}</div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { getCategoryApi } from '@/api/GetCategory'
import { getBannerApi } from '@/api/GetBanner'
import { serverApiUrl } from '@/api/serverApiUrl'
import { getHomeApi } from '@/api/GetCategory'
import { addViewApi } from '@/api/GetProductById'
import { addViewHistoryApi } from '@/api/AddViewHistory'
import { getCartListApi } from '../api/GetCartList'
import { searchApi } from '../api/Search'
/*导入图片*/


export default {
  name: "Home",
  data() {
    return {
      serverApiUrl: serverApiUrl,
      goodsType: [],
      banner: [],
      productArr: [],
      length: "1",
      name: "",
      hover:false
    }
  },
  methods: {
    kind() {
      getCategoryApi()
        .then(resp => {
          console.log(resp);
          this.goodsType = resp;
        })
    },

    getbanner() {
      getBannerApi()
        .then(resp => {
          console.log(resp);
          this.banner = resp;
        })
    },
    bindIcon(icon) {
      return require("@/assets/images" + icon);
    },
    more(id) {

      this.$router.push({
        path: '/more',
        query: {
          typeid: id,
          name: this.name,
        }
      })
    },
    getHomeProduct() {
      getHomeApi().then(resp => {
        this.productArr = resp;
        console.log(this.productArr);
      })
    },
    todetail(id) {
      if(JSON.parse(window.sessionStorage.getItem("user")) == null){
        this.$confirm('暂未登录，是否去登录')
          .then(_ => {
            this.$router.push({
        path: '/login',
      })
          })
          .catch(_ => {});
      }
      else{
        this.$router.push({
        path: '/detail',
        query: {
          id: id
        }
      })
      }
      
    },
    addView(id) {
      addViewApi({ "id": id }).then(resp => {
        if (JSON.parse(window.sessionStorage.getItem("user")) != null) {
          addViewHistoryApi({
            "productid": id,
            "userid": JSON.parse(window.sessionStorage.getItem("user")).id,
            "viewtime": new Date(),
          })
        }
      });


    },
    search() {
      this.$router.push({
        path: '/more',
        query: {
          typeid: "",
          name: this.name,
        }
      })
    }

  },
  created() {
    this.$parent.ifShow = true;
    this.kind();
    this.getbanner();
    this.getHomeProduct();
    getCartListApi({ "id": JSON.parse(window.sessionStorage.getItem("user")).id }).then(resp => {
      this.length = resp.length;

    })
  }
}
</script>

<style scoped>
.goods_list{
  background-color: #e0ffab;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 80%;
  margin-left: 10%;
  font-size: 20px;
  font-weight: 800;
  text-align: center;
}
</style>
